import React, { useEffect, useState, Component } from 'react';
import styles from './login.less';
import { request } from '@/utils/request';
import { history } from 'umi';
import { connect, router } from 'dva';
import {
  Menu, Switch, Divider, Checkbox, Button, Row, Col, Tooltip, notification,
  Form, Modal, Select, Tree, Icon, Radio, Table, Tag, Pagination, Input, Space, message, Card
} from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined, AudioOutlined, } from '@ant-design/icons';
import { add, set } from 'lodash';
import { findUserByUsername, findUsers, addUser } from '@/utils/loginAssert';


// dbms.active_database=graph3.db
const { SubMenu } = Menu;
const { Option } = Select;

const layout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const tailLayout = {
  wrapperCol: { offset: 4, span: 20 },
};

export default () => {

  //初始函数
  useEffect(() => {
    //此处编写 组件挂载之后和组件重新渲染之后执行的代码
    // 默认用户名密码
    
    addUser({ username: 'admin', password: '123456' })
    addUser({ username: 'admin', password: '321' })
    return () => {
      //此处编写 组件即将被卸载前执行的代码
    }
    // 4、若传值，但是传的是空数组 []，则表示该useEffect里的内容仅会在“挂载完成后和组件即将被卸载前”执行一次；
  }, [])

  const onFinish = (values) => {
    console.log('Success:', values);
    const { username, password } = values;
    const users = findUsers();
    let user = users.find(item => item.username === username && item.password === password)
    if (user) {
      message.info('login success！')
      sessionStorage.setItem("user", JSON.stringify(user));
      let pathname = sessionStorage.getItem('url')
      pathname && history.push(pathname)
      !pathname && history.push('/neo/uav/')
    } else {
      if (users.find(item => item.username === username)) {
        message.error('username or password error！')
      } else {
        message.error('no account！')
      }
    }
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  const registry = () => {
    history.push('/user/registry')
  }

  const onFinishApi = (values) => {
    const { username, password } = values;
    request(`/api/user_route/login/${username}/${password}`, {
      method: 'GET',
    }).then(res => {
      const {success,data } = res
      console.log(res)
      if(success && data){
        message.info('login success！')
        sessionStorage.setItem("user", JSON.stringify(data));
        history.push('/runjoy')
      }else{
        message.error('username or password error！')
      }
    })
  }

  const onFinishFlask = (values) => {
    const { username, password } = values;
    request(`/flask/user/login/${username}/${password}`, {method:'get'}).then(res=>{
      const {success,data } = res
      console.log(res)
      if(success && data && data.length){
        message.info('login success！')
        addUser(values);
        history.push('/ol/dongxiaomai')
      }else{
        message.error('username or password error！')
      }
    })
  }

  return (
    <div className={styles.login}>
      <h1 style={{ textAlign: 'center', color: 'aliceblue' }}>Joyful Sport</h1>
      <Form
        {...layout}
        name="basic"
        initialValues={{
          remember: true,
        }}
        onFinish={onFinishApi}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="Username"
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your username!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="Password"
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>

        {/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
          <Checkbox style={{color:'white'}}>Remember me</Checkbox>
        </Form.Item> */}

        <Form.Item >
          <Button type="primary" htmlType="submit">Login</Button>
          <Button type="primary" style={{marginLeft:'10px'}} onClick={registry}>Registry</Button>
        </Form.Item>
       
      </Form>
    </div>
  );
}
